<template>
	<view class="realIdentification" v-if="user" :style="[{paddingTop:statusBar+ 'px'}]" >
		<view class="status" :style="[{height:statusBar+ 'px'}]" ></view>
		<view class="navigation" :style="[{top:statusBar+ 'px'}]">
			<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
			<view class="navigation-title">实名认证</view>
		</view>
		<view class="navigation-position"></view>
		<view class="identification-info" v-if="user.freelance">
			<view class="identification-info-item">
				<view>姓名</view>
				<view>{{ user.freelance.real_name }}</view>
			</view>
			<view class="identification-info-item">
				<view>性别</view>
				<view>{{ user.freelance.gender=='1'?'男':'女' }}</view>
			</view>
			<view class="identification-info-item">
				<view>用户生日</view>
				<view>{{ user.freelance.birth }}</view>
			</view>
			<view class="identification-info-item">
				<view>证件号码</view>
				<view>{{ user.freelance.id_no }}</view>
			</view>
			<!-- <view class="identification-info-item">
				<view>证件有效期</view>
				<view>2020.08.01-2040.08.01</view>
			</view> -->
		</view>
		<view class="identification-content" v-else >
			<view class="section-one">
				<view>身份认证</view>
				<view @click="showTips()">拍摄要求</view>
			</view>
			<view class="section-two">根据监管要求身份证照片仅用于实名认证</view>
			<view class="add-identification-img-box" @click="upImg('front')">
				<view class="left">
					<view>头像面</view>
					<view>上传身份证正面</view>
				</view>
				<view class="right"  v-if="frontImgSrc==''">
					<image src="/static/images/front.png" mode=""></image>
					<view>去上传</view>
				</view>
				<view class="right"  v-else>
					<image :src="frontImgSrc" class="frontImg" mode=""></image>
				</view>
			</view>
			<view class="progress">
			  <progress :percent="frontPercent" active stroke-width="3" duration="10" />
			</view>
			<view class="add-identification-img-box" @click="upImg('back')">
				<view class="left">
					<view>国徽面</view>
					<view>上传身份证反面</view>
				</view>
				<view class="right"  v-if="backImgSrc==''">
					<image src="/static/images/backside.png" mode=""></image>
					<view>去上传</view>
				</view>
				<view class="right"  v-else>
					<image :src="backImgSrc" class="frontImg" mode=""></image>
				</view>
			</view>
			<view class="progress">
			  <progress :percent="backPercent" active stroke-width="3" duration="10" />
			</view>
			<view class="input-item">
				<view>真实姓名</view>
				<input type="text" value="" v-model="real_name" placeholder="请输入" placeholder-style="font-size:28rpx;color:#CCCCCC;" />
			</view>
			<view class="input-item">
				<view>身份证号</view>
				<input type="text" value="" v-model="id_no" placeholder="请输入" placeholder-style="font-size:28rpx;color:#CCCCCC;" />
			</view>
			<!-- <view class="safe">
				<image src="/static/images/safe-icon.png" class="safe-icon" mode=""></image>
				<view>保障信息安全</view>
			</view> -->
			<!-- <view class="agreement">
				<view class="checkbox" >
					<view class="choiced-box" v-if="agreement" @click="handleClick">
						<image src="/static/images/download-choiced.png" mode=""></image>
					</view>
					<view class="show-box" v-else @click="handleClick"></view>
					<view @click="handleClick">我已阅读并同意</view>
					<view class="agreement-href" >《共享经济灵活用工服务协议》</view>
				</view>
			</view> -->
			<view class="submit" @click="freelances()">去提交</view>
			
		</view>
		
		
		
		<uni-popup ref="tipsPopup" type="center">
			<view class="tips-modal">
				<view class="part-one">
					<view>正确示范</view>
					<view>
						<image src="/static/images/demonstration-right.png" mode=""></image>
						<view>
							<image src="/static/images/correct.png" mode=""></image>
							<view>标准拍摄</view>
						</view>
					</view>
				</view>
				<view class="notice">拍摄须知</view>
				<view class="error-img">
					<view>
						<image src="/static/images/error-img1.png" mode=""></image>
						<view>
							<image src="/static/images/error.png" mode=""></image>
							<view>拍摄不全</view>
						</view>
					</view>
					<view>
						<image src="/static/images/error-img2.png" mode=""></image>
						<view>
							<image src="/static/images/error.png" mode=""></image>
							<view>拍摄模糊</view>
						</view>
					</view>
					<view>
						<image src="/static/images/error-img3.png" mode=""></image>
						<view>
							<image src="/static/images/error.png" mode=""></image>
							<view>闪光过度</view>
						</view>
					</view>
				</view>
				<view class="confirm-btn" >我知道了</view>
			</view>
		</uni-popup>
		<uni-popup ref="upStatePopup" type="center">
			<view class="up-state-modal">
				<image src="/static/images/fail.png" mode=""></image>
				<view>提交失败</view>
				<view>身份证识别有误，请按照提示上传</view>
				<view >重新上传</view>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	/* var lastTouchEnd = 0;
	document.documentElement.addEventListener('touchend', function (event) {undefined
		var now = Date.now();
		if (now - lastTouchEnd <= 300) {undefined
			event.preventDefault();
		}
		lastTouchEnd = now;
	}, false);
	function getRequestParams() {
			let url = location.href;
			let requestParams = {};
			if (url.indexOf('?') !== -1) {
				let str = url.substr(url.indexOf('?') + 1);
				let strs = str.split('&');
				for (let i = 0; i < strs.length; i++) {
					requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return requestParams;
	}
	let params = getRequestParams();
	let token = params['token'];
	let status_bar =  params['status_bar'];
	let source = 'wap'
	if(token!=undefined){
		uni.setStorage({
		    key: 'token',
		    data: token
		})
		source = 'app'
	}
	if(status_bar!=undefined){
		uni.setStorage({
		    key: 'status_bar',
		    data: status_bar
		})
	} */
	
	import store from "store";
	import { mapGetters, mapActions, mapMutations } from 'vuex'
	import { freelances } from "api/userAccountApi.js"
	import { getUser } from "api/userApi";
	import Base64 from 'base-64';
	let date = new Date()
	let year = date.getFullYear()
	let month = date.getMonth() + 1;
	let day = date.getDate()
	let signNum = Base64.encode((year + month * 2 + day * 3) * 2)
	export default {
		store,
		computed:{
			...mapGetters([
				'user',
				'statusBar'
			])
		},
		data (){
			return {
				currentImages:[],
				frontImgSrc:'',
				backImgSrc:'',
				real_name:'',
				id_no:'',
				frontPercent: 0,
				backPercent:0,
				identificationed:false,
				source:source,
				agreement:true
			}
		},
		methods:{
			...mapMutations([
				'setUser',
				'setStatusBar'
			]),
			handleClick() {
				this.agreement = !this.agreement
			},
			openAgreement(){
				window.location.href = "https://littleshop.oss-cn-beijing.aliyuncs.com/others/hlg_2021.pdf"
				// uni.navigateTo({
				// 	url:'/packs/pages/withdrawal/workerAgreement'
				// })
			},
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			back(){
				if(this.source == 'wap'){
					uni.navigateBack()
				}else{
					// window.flutter_inappwebview.callHandler('back_to_app', '')
					backToApp.postMessage('back');
				}
			},
			showTips(){
				this.$refs.tipsPopup.open('center')
			},
			closeTips(){
				this.$refs.tipsPopup.close('center')
			},
			showUpStatePopup(){
				this.$refs.upStatePopup.open('center')
			},
			closeUpStatePopup(){
				this.$refs.upStatePopup.close('center')
			},
			upImg(type){
				let _this = this;
				if(type == 'front'){
					_this.frontPercent = 0;
				}
				if(type == 'back'){
					_this.backPercent = 0;
				}
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (chooseImageRes) {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						let  contentText = JSON.stringify(tempFilePaths)
						let token = uni.getStorageSync('token');
						let Authorization = ''
						if(token==''){
							Authorization = 'Bearer ' + store.getters.accessToken
						}else{
							Authorization = 'Bearer ' + token
						}
						const uploadTask = uni.uploadFile({
							url:_this.uploadUrl,
						  // url: 'https://shopdev.littleshop.shop/api/v1/files',//测试
						  // url: 'https://shop.littleshop.shop/api/v1/files', //正式
						  method: 'post',
						  filePath: tempFilePaths[0],
						  name: 'image',
						  header: {
								Authorization: Authorization,
								sign:signNum
							},
						  success: async (uploadFileRes) => {
						    let image = JSON.parse(uploadFileRes.data)
								if(type == 'front'){
									_this.frontImgSrc = image.image
								}
								if(type == 'back'){
									_this.backImgSrc = image.image
								}
						  }
						})
						uploadTask.onProgressUpdate((res) => {
							if(type == 'front'){
								_this.frontPercent = res.progress;
							}
							if(type == 'back'){
								_this.backPercent = res.progress;
							}
						})
					}
				})
			},
			freelances(){
				if(this.frontImgSrc==''){
					uni.showToast({
						icon:'none',
						title:'请上传身份证正面图'
					})
				}else if(this.backImgSrc == ''){
					uni.showToast({
						icon:'none',
						title:'请上传身份证反面图'
					})
				}else if(this.real_name == ''){
					uni.showToast({
						icon:'none',
						title:'请输入您的真实姓名'
					})
				}else if(this.id_no == ''){
					uni.showToast({
						icon:'none',
						title:'请输入您的真实身份证号码'
					})
				}else if(!this.agreement){
					uni.showToast({
						icon:'none',
						title:'请阅读并同意共享经济灵活用工服务协议'
					})
				}else{
					let parms = {
						"real_name":this.real_name,
						"id_no":this.id_no,
						"id_card_front":this.frontImgSrc,
						"id_card_back":this.backImgSrc
					}
					freelances(parms).then(res=>{
						this.identificationed = true;
						if(!res.message){
							uni.showToast({
								icon:'none',
								title:'认证成功！'
							})
							setTimeout(()=>{
								uni.navigateBack()
							},500)
						}else{
							uni.showModal({
								title:'提示',
								content:Object.values(res.errors)[0][0],
								confirmText:'知道了',
								confirmColor:'#FF6011',
								showCancel:false
							})
						}
						
					})
				}
			}
		},
		async onShow(){
			if(status_bar!=undefined){
				this.setStatusBar(status_bar)
			}
			await this.getUser()
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F6F6;
		padding-bottom: 150rpx;
	}
	.realIdentification{
		padding-top: 130rpx;
		min-height: 100vh;
		position: relative;
		
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:99;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.identification-content{
		width: 686rpx;
		height: 858rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
	}
	.section-one{
		padding: 48rpx 32rpx 8rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		>view:nth-child(1){
			font-size: 36rpx;
			font-weight: 600;
			color: #333333;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-weight: 400;
			color: #1877FF;
		}
	}
	.section-two{
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		margin:0 0 48rpx 32rpx;
	}
	.add-identification-img-box{
		width: 622rpx;
		height: 216rpx;
		background: #F4F7FB;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;
		margin:0 auto 16rpx;
		.left{
			>view:nth-child(1){
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
				margin:32rpx 0 8rpx 32rpx;
			}
			>view:nth-child(2){
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
				margin-left: 32rpx;
			}
		}
		.right{
			width: 242rpx;
			height: 164rpx;
			background: rgba(24, 119, 255, 0.06);
			border-radius: 12rpx;
			border: 1rpx solid #1877FF;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 26rpx 16rpx 26rpx 0;
			>image{
				display: block;
				width: 184rpx;
				height: 115rpx;
				background: #FFFFFF;
				// box-shadow: 0px 0px 4rpx 0px rgba(24,119,255,0.1);
				border-radius: 15rpx;
				opacity: .5;
			}
			.frontImg{
				display: block;
				width: 242rpx;
				height: 164rpx;
				border-radius: 12rpx;
				opacity:1;
			}
			>view{
				position: absolute;
				top:58rpx;
				left:70rpx;
				width: 104rpx;
				height: 48rpx;
				background: #1877FF;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
	.input-item{
		height: 84rpx;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		>view{
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			margin-left: 32rpx;
		}
		>input{
			width: 386rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			margin-left: 15rpx;
		}
	}
	.submit{
		width: 686rpx;
		height: 96rpx;
		background: #1877FF;
		border-radius: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 120rpx;
		// position: fixed;
		// left:50%;
		// margin-left: -343rpx;
		// bottom: 30rpx;
	}
	.safe{
		width: 206rpx;
		height: 40rpx;
		background: rgba(68, 214, 171, .2);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 100rpx auto 30rpx;
		// position: fixed;
		// bottom: 180rpx;
		// left:50%;
		// margin-left: -103rpx;
		>image{
			display: block;
			width: 24rpx;
			height: 24rpx;
			margin-right: 5rpx;
		}
		>view{
			font-size: 24rpx;
			font-weight: 400;
			color: #00C88D;
		}
	}
	.tips-modal{
		width: 640rpx;
		height: 702rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		.part-one{
			display: flex;
			justify-content: space-between;
			>view:nth-child(1){
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				margin:48rpx 0 0 48rpx;
			}
			>view:nth-child(2){
				margin: 48rpx 52rpx 0 0;
				>image{
					display: block;
					width: 276rpx;
					height: 182rpx;
				}
				>view{
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 16rpx;
					>image{
						display: block;
						width: 24rpx;
						height: 24rpx;
					}
					>view{
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
		.notice{
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			margin: 48rpx 0 0 48rpx;
		}
		.error-img{
			padding: 0 48rpx;
			margin-top: 36rpx;
			display: flex;
			justify-content: space-between;
			>view{
				width: 132rpx;
				>image{
					display: block;
					width: 132rpx;
					height: 88rpx;
				}
				>view{
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 16rpx;
					>image{
						display: block;
						width: 24rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}
					>view{
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
	}
	.confirm-btn{
		width: 368rpx;
		height: 88rpx;
		background: #1877FF;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin:48rpx auto 0;
	}
	.up-state-modal{
		width: 686rpx;
		height: 456rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding-top: 64rpx;
		>image{
			display: block;
			width: 96rpx;
			height: 96rpx;
			margin:0rpx auto 24rpx;
		}
		>view:nth-child(2){
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
			text-align: center;
		}
		>view:nth-child(3){
			font-size: 28rpx;
			text-align: center;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
			margin-top: 24rpx;
		}
		>view:nth-child(4){
			width: 360rpx;
			height: 84rpx;
			background: #1877FF;
			border-radius: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin: 80rpx auto 0;
		}
	}
	.identification-info{
		width: 590rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		padding: 0 48rpx;
		>view:nth-last-child(1){
			border: none;
		}
		
	}
	.identification-info-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 118rpx;
		border-bottom: 1rpx solid #F0F0F0;
		font-size: 28rpx;
		font-weight: 400;
		>view:nth-child(1){
			color: #333333;
		}
		>view:nth-child(2){
			color: #999999;
		}
	}
	.progress {
	  width: 622rpx;
	  height: 10rpx;
		margin:0 auto 10rpx;
	}
	
	.agreement-text{
		display: flex;
		a{
			text-decoration: none;
			color: #FB0016;
		}
	}
	.agreement{
		display: flex;
		justify-content: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		width: 100%;
		margin-bottom: 20rpx;
		// position: fixed;
		// left:0;
		// bottom:140rpx;
	}
	.checkbox{
		display: flex;
		align-items: center;
		.choiced-box{
			width: 28rpx;
			height: 28rpx;
			border-radius: 4rpx;
			margin-right: 5rpx;
			background: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
			>image{
				display: block;
				width:26rpx;
				height:26rpx;
			}
		}
		.show-box{
			width: 24rpx;
			height: 24rpx;
			border-radius: 4rpx;
			border: 2rpx solid #333333;
			margin-right: 5rpx;
		}
		.agreement-href{
			color:#2979FF;
		}
	}
	.webtips{
		position: absolute;
		left:0;
		bottom:0rpx;
		width: 100%;
		height: 40rpx;
		font-size: 20rpx;
		color: #999999;
		text-align: center;
	}
</style>
